<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		.main {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 300px;
			height: 300px;
			transform: translate(-50%, -50%);
			-webkit-perspective: 1500;
			-moz-perspective: 1500;
		}

		.box {
			position: absolute;
			top: 0;
			left: 0;
			width: 300px;
			height: 300px;
			transition: all 1s;
			backface-visibility: hidden;
			border-radius: 10px;
			cursor: pointer;
		}

		.b1 {
			background: skyblue;
		}

		.b2 {
			background: tomato;
			transform: rotateY(-180deg);
		}
	</style>
	<body>
		<div class="main">
			<div class="box b1"></div>
			<div class="box b2"></div>
		</div>
	</body>
	<script>
		var b1 = document.querySelector(".b1");
		var b2 = document.querySelector(".b2");
		
		b1.onclick = function() {
		  b1.style.transform = "rotateY(180deg)";
		  b2.style.transform = "rotateY(0deg)";
		}
		
		b2.onclick = function() {
		  b2.style.transform = "rotateY(-180deg)";
		  b1.style.transform = "rotateY(0deg)";
		}
	</script>
	
	<!-- 
	 -webkit-perspective：透视效果
	 backface-visibility：隐藏被旋转的 div 元素的背面
	 -->
</html>
